<script setup>
import {computed, inject, provide, ref, watch} from "vue";
import BaseInfo from "@/views/warehouse/tray/components/carbaseinfo.vue";
import CarList from "@/views/warehouse/tray/components/carlist.vue";
import TrayList from "@/views/warehouse/tray/components/traylist.vue";
import car from "@/api/warehouse/car";
const record = ref({})
const baseinfo_data = ref([])
const traylist_data = ref([])
const carlist_data = ref([])
const crudRef = inject('crudRef')
const visible = ref(false)
const open = async (data) => {
  record.value = data
  refreshRecode()
  visible.value = true
}

const refreshRecode = async (type) => {
  if(record.value.id == undefined){
    return;
  }
  console.log('刷新详情')
  let request = await car.read(record.value.id)
  carlist_data.value = request.data.carlist
  traylist_data.value = request.data.trayList
  baseinfo_data.value = request.data.carInfo
  if(type == true){
    console.log('刷新列表')
    crudRef.value.refresh()
  }
}

const colGap = ref(6)
const rowGap = ref(6)
provide('colGap', colGap)
provide('rowGap', rowGap)
provide('refreshRecode', refreshRecode)
provide('baseinfo_data', baseinfo_data)
provide('traylist_data', traylist_data)
provide('carlist_data', carlist_data)
defineExpose({ open })
</script>
<template>
  <a-drawer v-model:visible="visible" width="80%">
    <template #title>
      <div class="grid grid-cols-[minmax(0,1fr),auto] items-center">
        <div>卡车信息#{{ record.id }}</div>
      </div>
    </template>
      <a-space direction="vertical" class="w-full">
        <a-grid :cols="{ xs: 1, sm: 2, md: 3, lg: 4, xxl: 6 }" :colGap="colGap" :rowGap="rowGap">
            <base-info />
            <CarList />
            <TrayList />
        </a-grid>
      </a-space>
  </a-drawer>
</template>